<template>
  <div class="gantt-demo" v-loading="loading">
    <BaseGantt :tasks="tasks" :columns="columns" />
  </div>
</template>

<script setup>
import BaseGantt from "@/components/BaseGantt/BaseGantt.vue";
import { ref } from "vue";
const loading = ref(false);
// 示例任务数据
// 任务数据
const today = new Date();
const tasks = ref([
  {
    id: 1,
    name: "需求分析",
    startDate: new Date(today.getFullYear(), today.getMonth(), 1),
    endDate: new Date(today.getFullYear(), today.getMonth(), 7),
    progress: 100,
    assignee: "张三",
    remark: "完成所有功能需求分析",
  },
  {
    id: 2,
    name: "架构设计",
    startDate: new Date(today.getFullYear(), today.getMonth(), 5),
    endDate: new Date(today.getFullYear(), today.getMonth(), 12),
    progress: 100,
    assignee: "李四",
    remark: "系统架构设计与技术选型",
  },
  {
    id: 3,
    name: "前端开发",
    startDate: new Date(today.getFullYear(), today.getMonth(), 10),
    endDate: new Date(today.getFullYear(), today.getMonth() + 1, 5),
    progress: 75,
    assignee: "王五",
    remark: "用户界面与交互开发",
  },
  {
    id: 4,
    name: "后端开发",
    startDate: new Date(today.getFullYear(), today.getMonth(), 10),
    endDate: new Date(today.getFullYear(), today.getMonth() + 1, 10),
    progress: 60,
    assignee: "赵六",
    remark: "API接口与业务逻辑开发",
  },
  {
    id: 5,
    name: "测试",
    startDate: new Date(today.getFullYear(), today.getMonth() + 1, 1),
    endDate: new Date(today.getFullYear(), today.getMonth() + 1, 20),
    progress: 30,
    assignee: "孙七",
    remark: "功能测试与性能测试",
  },
  {
    id: 6,
    name: "部署上线",
    startDate: new Date(today.getFullYear(), today.getMonth() + 1, 15),
    endDate: new Date(today.getFullYear(), today.getMonth() + 1, 25),
    progress: 0,
    assignee: "周八",
    remark: "生产环境部署与上线",
  },
]);
</script>

<style scoped lang="less">
.gantt-demo {
  padding: 20px;
}
</style>